<!--
  @Descripttion:企业端-统计看板-平台概览
  @Author：yejianbo
  @Date：2022年05月08日 22:50:42
-->
<template>
  <div class="dashboard-editor-container">
    <el-card shadow="always" style="margin-bottom: 20px">
      <p class="ansy-title">平台概览</p>
      <el-row type="flex" class="row-bg">
        <el-date-picker
          v-model="dateValue"
          type="daterange"
          range-separator="至"
          value-format="yyyy-MM-dd"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          size="small"
          style="margin-right: 10px"
          @change="dateChange"
        />
        <el-button
          type="primary"
          plain
          size="mini"
          style="margin-right: 10px"
          @click="viewByTime('week')"
        >只看本周</el-button>
        <el-button
          type="primary"
          plain
          size="mini"
          style="margin-right: 10px"
          @click="viewByTime('month')"
        >只看本月</el-button>
        <el-button
          type="primary"
          plain
          size="mini"
          style="margin-right: 10px"
          @click="init"
        >查询</el-button>
        <el-button
          plain
          size="mini"
          style="margin-right: 10px"
          @click="reset"
        >重置</el-button>
      </el-row>
      <el-row :gutter="32" style="padding-top: 20px">
        <el-col :span="3">
          <div class="item-title">
            招聘职位总数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间范围内，当前企业发布中的职位数"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.jobTotal }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            职位浏览数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间范围内，当前企业各个职位详情点击数和（UV）"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.clickNum }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            已投递简历数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间范围内，当前企业各个发布职位中，多少学生投递简历（单个学生投递多个职位不重）"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.postNum }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            发送邀约数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间范围内，当前企业各个发布职位中，学生投递简历后，收到面试邀约数（单个学生收到多个职位邀约算多次，单个职位重复邀约算1次）"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.inviteNum }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            确认邀约数
            <el-tooltip
              class="item"
              effect="dark"
              content="所选时间范围内，当前企业各个发布职位中，学生投递简历后，收到面试邀约，多少学生确认邀约（单个学生收到多个职位邀约算多次，单个职位重复邀约算1次）"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.confirmInviteNum }}</div>
        </el-col>
        <el-col :span="3">
          <div class="item-title">
            应邀率
            <el-tooltip
              class="item"
              effect="dark"
              content="确认邀约数/发送邀约数*100%"
              placement="top"
            >
              <i class="icon-font el-icon-warning-outline" />
            </el-tooltip>
          </div>
          <div class="count-num">{{ jobDataCount.ratio }}%</div>
        </el-col>
      </el-row>
    </el-card>
    <el-row>
      <el-col :span="8">
        <el-card shadow="always">
          <p class="ansy-title">7天内即将下架职位</p>
          <el-table v-if="jobDataCount.jobList" size="mini" border fit :data="jobDataCount.jobList">
            <el-table-column type="index" label="序号" align="center" />
            <el-table-column prop="jobName" label="职位" align="center" />
          </el-table>
          <el-empty v-else style="width: 100%" description="暂无数据" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getCompanyByLoginUser } from '@/api/company-admin-api/hireManage/index.js'
import { getEnterpriseJobCensus } from '@/api/company-admin-api/hireManage/index.js'
import moment from 'moment'
export default {
  name: 'CompanyAnalytics',
  components: {},
  data() {
    return {
      dateValue: null,
      jobDataCount: {
        jobTotal: 0,
        clickNum: 0,
        postNum: 0,
        unhandledPostNum: 0,
        handledPostNum: 0,
        inviteNum: 0,
        confirmInviteNum: 0,
        ratio: 0
      },
      // 招聘职位查询参数
      jobQueryParams: {
        endDate: '', // 结束时间(type==1时传)
        startDate: '', // 开始时间(type==1时传)
        type: 0 // 查询类型,0:默认(不传时间),1:时间间隔,2:本周,3:本月
      },
      dataDialog: false
    }
  },
  created() {
    this.init()
  },
  methods: {
    // 快捷查看本周、本月
    viewByTime(type) {
      let startDate, endDate
      if (type === 'week') {
        startDate = moment().startOf('week').add(1, 'day').format('YYYY-MM-DD')
        endDate = moment().format('YYYY-MM-DD')
        this.jobQueryParams.startDate = startDate
        this.jobQueryParams.endDate = endDate
        this.jobQueryParams.type = 2
      } else {
        startDate = moment().startOf('month').format('yyyy-MM-DD')
        endDate = moment().format('yyyy-MM-DD')
        this.jobQueryParams.startDate = startDate
        this.jobQueryParams.endDate = endDate
        this.jobQueryParams.type = 3
      }
      this.$set(this, 'dateValue', [startDate, endDate])
    },
    dateChange(data) {
      if (Array.isArray(data) && data.length === 2) {
        this.jobQueryParams.startDate = data[0]
        this.jobQueryParams.endDate = data[1]
        this.jobQueryParams.type = 1
      } else {
        this.jobQueryParams.startDate = ''
        this.jobQueryParams.endDate = ''
        this.jobQueryParams.type = 0
      }
    },
    reset() {
      this.jobQueryParams = this.$options.data().jobQueryParams
      this.dateValue = null
      this.init()
    },
    async init() {
      await getCompanyByLoginUser().then((res) => {
        if (res.code === 0 && res.data) {
          this.$store.dispatch('updateCompanyInfo', res.data)
        }
      })
      this.getEnterpriseJobCensus()
    },
    // 招聘情况统计
    getEnterpriseJobCensus() {
      const params = Object.assign({}, this.jobQueryParams)
      for (const key in params) {
        if (params[key] === '' || params[key] === null) {
          delete params[key]
        }
      }
      if (params.startDate && params.endDate) {
        params.startDate += ' 00:00:00'
        params.endDate += ' 23:59:59'
      }
      if (Number(params.type) !== 1) {
        delete params.startDate
        delete params.endDate
      }
      getEnterpriseJobCensus(params).then((res) => {
        if (res.code === 0 && res.data) {
          Object.assign(this.jobDataCount, res.data)
          this.jobDataCount.ratio =
            res.data.inviteNum > 0 && res.data.confirmInviteNum > 0
              ? (
                Number(
                  (res.data.confirmInviteNum * 100) /
                      (res.data.inviteNum * 100)
                ) * 100
              ).toFixed(2)
              : 0
          res.data.jobList = res.data.jobList || []
          this.jobDataCount.jobList = res.data.jobList.map((item, index) => {
            return {
              jobName: item,
              index: index
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/vars.scss";
.blue06 {
  color: $blue06;
}
.ansy-title {
  @include t14h22;
  font-weight: 600;
}
.m14 {
  margin-bottom: 14px;
}
.no-margin {
  margin: 0;
}
.item-title {
  @include t12h20;
}
.count-num {
  font-size: 22px;
  color: $blue06;
  line-height: 30px;
  span {
    color: #000;
    @include t12h20;
  }
}
.count-data {
  font-size: 12px;
  margin: 0;
  color: $blue06;
  font-weight: 600;
}
.greed {
  color: $green04;
}
.dashboard-editor-container {
  padding: 14px;
  background-color: rgb(240, 242, 245);
  position: relative;
  height: 100vh;
  .chart-wrapper {
    background: #fff;
    padding: 14px 14px 0;
    margin-bottom: 14px;
  }
}

@media (flowmax-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
